﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Demo/DemoMaster.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="demoheader" runat="Server">
    Customized sorting
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="demosubheader" runat="Server">
    User <span>trigger('sort')</span> to customize the sorting.
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="democontent" runat="Server">
    <style type="text/css">
       
        #demo table td
        {
            padding: 8px;
        }
        
    </style>
    <div id="demo">
        <p>
            Click header to sort data, if same ordered by name</p>
        <div class="PaginationContainer">
        </div>
        <br style="clear: both;" />
        <div id="Container">
        </div>
        <div class="PaginationContainer">
        </div>
        <br style="clear: both;" />
        <textarea id="template" style="display: none">
			<table>
				<tr>
					<th></th>
					<th onclick="sort('Name')"> Name </th>
					<th onclick="sort('AverageRating')"> Average Rating </th>
					<th onclick="sort('Dvd.Available')"> DVD Available </th>
					<th onclick="sort('DateModified')"> Modified </th>
				</tr>
				{#foreach $T as d}
				<tr class="{#cycle values=['odd','even']}">
					<td> {$T.d$index + 1} </td>
					<td> {$T.d.Name} </td>
					<td class="number"> 
						  {#if $T.d.AverageRating < 2} <span style="color: Red">{$T.d.AverageRating}</span> {#elseif $T.d.AverageRating
                        < 3} <span style="color: Orange">{$T.d.AverageRating}</span> {#else} {$T.d.AverageRating} {#/if}
					</td>
					<td> {$T.d.Dvd.Available ? 'Y' : 'N'} </td>
					<td> {$d.datetime.format($T.d.DateModified, "MMM/dd/yyyy")} </td>
				</tr>
				{#/for}
			</table>
		</textarea>
    </div>
    <script type="text/javascript" src="../jQueryClient/postback.js"></script>
    <script type="text/javascript" src="../jQueryClient/databind.js"></script>
    <script type="text/javascript" src="../jQueryClient/jTemplates.js"></script>
    <script type="text/javascript" src="../jQueryClient/pagination.js"></script>
    <link rel="stylesheet" href="../css/pagination.css" />
    <script type="text/javascript" src="../jQueryClient/dataformat.js"></script>
    <script type="text/javascript" src="../jQueryClient/datejs.js"></script>
    <script type="text/javascript">
        $(function () {
            $.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$top=50&$callback=callback", {}, {
                ajax: {	
                    dataType : "jsonp",
                    jsonpCallback: "callback"
                },
                callback: function (data) {
                    $("#Container").dataBind($("#template").text(), data.d, {
                        //show pageination in .PaginationContainer
                        page_container: '.PaginationContainer',
                        empty_text: '<span style="color:Red;">No data in the data source.</span>',
                        page_size: 15,
                        page_animation: 'fadein'
                    });
                }
            });
        });

        var d = 1;
        function sort(field) {
            switch (field) {
                case "Name":
                    $("#Container").trigger('sort', function (a, b) {
                        return (a.Name < b.Name ? -1 : 1) * d;
                    });
                    break;
                case "AverageRating":
                    $("#Container").trigger('sort', function (a, b) {
                        return a.AverageRating == b.AverageRating ?
                            (a.Name < b.Name ? -1 : 1) :
                            (a.AverageRating - b.AverageRating) * d;
                    });
                    break;
                case "Dvd.Available":
                    $("#Container").trigger('sort', function (a, b) {
                        return a.Dvd.Available == b.Dvd.Available ?
                            (a.Name < b.Name ? -1 : 1) :
                            (a.Dvd.Available < b.Dvd.Available ? 1 : -1) * d;
                    });
                    break;
                case "DateModified":
                    $("#Container").trigger('sort', function (a, b) {
                        return a.DateModified == b.DateModified ?
                            (a.Name < b.Name ? -1 : 1) :
                            ($d.datetime.format(a.DateModified) < $d.datetime.format(b.DateModified) ? 1 : -1) * d;
                    });
                    break;
            }
            d *= -1;
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="javascript" runat="Server">
    <pre name="javascriptcode" class="js:nocontrols">
        $(function () {
            $.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$top=50&$callback=callback", {}, {
                ajax: {	
                    dataType : "jsonp",
                    jsonpCallback: "callback"
                },
                callback: function (data) {
                    $("#Container").dataBind($("#template").text(), data.d, {
                        //show pageination in .PaginationContainer
                        page_container: '.PaginationContainer',
                        empty_text: '<span style="color: Red;">No data in the data source.</span>',
                        page_size: 15,
                        page_animation: 'fadein'
                    });
                }
            });
        });

        var d = 1;
        function sort(field) {
            switch (field) {
                case "Name":
                    $("#Container").trigger('sort', function (a, b) {
                        return (a.Name < b.Name ? -1 : 1) * d;
                    });
                    break;
                case "AverageRating":
                    $("#Container").trigger('sort', function (a, b) {
                        return a.AverageRating == b.AverageRating ?
                            (a.Name < b.Name ? -1 : 1) :
                            (a.AverageRating - b.AverageRating) * d;
                    });
                    break;
                case "Dvd.Available":
                    $("#Container").trigger('sort', function (a, b) {
                        return a.Dvd.Available == b.Dvd.Available ?
                            (a.Name < b.Name ? -1 : 1) :
                            (a.Dvd.Available < b.Dvd.Available ? 1 : -1) * d;
                    });
                    break;
                case "DateModified":
                    $("#Container").trigger('sort', function (a, b) {
                        return a.DateModified == b.DateModified ?
                            (a.Name < b.Name ? -1 : 1) :
                            ($d.datetime.format(a.DateModified) < $d.datetime.format(b.DateModified) ? 1 : -1) * d;
                    });
                    break;
            }
            d *= -1;
        }
</pre>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="html" runat="Server">
    <pre name="htmlcode" class="html:nocontrols">
        &lt;div class=&quot;PaginationContainer&quot;&gt;
        &lt;/div&gt;
        &lt;br style=&quot;clear: both;&quot; /&gt;
        &lt;div id=&quot;Container&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;PaginationContainer&quot;&gt;
        &lt;/div&gt;
        &lt;br style=&quot;clear: both;&quot; /&gt;
        &lt;textarea id=&quot;template&quot; style=&quot;display: none&quot;&gt;
			        &lt;table&gt;
				        &lt;tr&gt;
					        &lt;th&gt;&lt;/th&gt;
					        &lt;th onclick=&quot;sort(&#39;Name&#39;)&quot;&gt; Name &lt;/th&gt;
					        &lt;th onclick=&quot;sort(&#39;AverageRating&#39;)&quot;&gt; Average Rating &lt;/th&gt;
					        &lt;th onclick=&quot;sort(&#39;Dvd.Available&#39;)&quot;&gt; DVD Available &lt;/th&gt;
					        &lt;th onclick=&quot;sort(&#39;DateModified&#39;)&quot;&gt; Modified &lt;/th&gt;
				        &lt;/tr&gt;
				        {#foreach $T as d}
				        &lt;tr class=&quot;{#cycle values=[&#39;odd&#39;,&#39;even&#39;]}&quot;&gt;
					        &lt;td&gt; {$T.d$index + 1} &lt;/td&gt;
					        &lt;td&gt; {$T.d.Name} &lt;/td&gt;
					        &lt;td class=&quot;number&quot;&gt; 
						          {#if $T.d.AverageRating &lt; 2} 
                    &lt;span style=&quot;color: Red&quot;&gt;{$T.d.AverageRating}&lt;/span&gt; 
                {#elseif $T.d.AverageRating &lt; 3} 
                    &lt;span style=&quot;color: Orange&quot;&gt;{$T.d.AverageRating}&lt;/span&gt; 
                {#else} {$T.d.AverageRating} {#/if}
					        &lt;/td&gt;
					        &lt;td&gt; {$T.d.Dvd.Available ? &#39;Y&#39; : &#39;N&#39;} &lt;/td&gt;
					        &lt;td&gt; {$d.datetime.format($T.d.DateModified, &quot;MMM/dd/yyyy&quot;)} &lt;/td&gt;
				        &lt;/tr&gt;
				        {#/for}
			        &lt;/table&gt;
		        &lt;/textarea&gt;
 </pre>
</asp:Content>
